<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 11 Excercise - Ploty | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.20 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 11 Excercise - Ploty | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="JohnCoene/javascript-for-r" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 11 Excercise - Ploty | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2020-09-04" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="final-revisions.html"/>
<link rel="next" href="introduction-to-shiny.html"/>
<script src="libs/header-attrs/header-attrs.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/accessible-code-block/empty-anchor.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/plotly-binding/plotly.js"></script>
<script src="libs/typedarray/typedarray.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main/plotly-latest.min.js"></script>
<script src="libs/core-js/shim.min.js"></script>
<script src="libs/react/react.min.js"></script>
<script src="libs/react/react-dom.min.js"></script>
<script src="libs/reactwidget/react-tools.js"></script>
<script src="libs/reactable-binding/reactable.js"></script>
<script src="libs/r2d3-render/r2d3-render.js"></script>
<script src="libs/webcomponents/webcomponents.js"></script>
<script src="libs/r2d3-binding/r2d3.js"></script>
<script src="libs/d3v5/d3.min.js"></script>
<script src="libs/viz/viz.js"></script>
<link href="libs/DiagrammeR-styles/styles.css" rel="stylesheet" />
<script src="libs/grViz-binding/grViz.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/toc.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">JavaScript for R</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a>
<ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#premise"><i class="fa fa-check"></i>Premise</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#book-structure"><i class="fa fa-check"></i>Book Structure</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#acknowledgement"><i class="fa fa-check"></i>Acknowledgement</a></li>
</ul></li>
<li class="part"><span><b>I Basics &amp; Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="overview.html"><a href="overview.html"><i class="fa fa-check"></i><b>1</b> Overview</a>
<ul>
<li class="chapter" data-level="1.1" data-path="overview.html"><a href="overview.html#rationale"><i class="fa fa-check"></i><b>1.1</b> Rationale</a></li>
<li class="chapter" data-level="1.2" data-path="overview.html"><a href="overview.html#methods"><i class="fa fa-check"></i><b>1.2</b> Methods</a>
<ul>
<li class="chapter" data-level="1.2.1" data-path="overview.html"><a href="overview.html#v8"><i class="fa fa-check"></i><b>1.2.1</b> V8</a></li>
<li class="chapter" data-level="1.2.2" data-path="overview.html"><a href="overview.html#htmlwidgets"><i class="fa fa-check"></i><b>1.2.2</b> htmlwidgets</a></li>
<li class="chapter" data-level="1.2.3" data-path="overview.html"><a href="overview.html#shiny"><i class="fa fa-check"></i><b>1.2.3</b> Shiny</a></li>
<li class="chapter" data-level="1.2.4" data-path="overview.html"><a href="overview.html#bubble"><i class="fa fa-check"></i><b>1.2.4</b> bubble</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="overview.html"><a href="overview.html#methods-amiss"><i class="fa fa-check"></i><b>1.3</b> Methods Amiss</a>
<ul>
<li class="chapter" data-level="1.3.1" data-path="overview.html"><a href="overview.html#reactr"><i class="fa fa-check"></i><b>1.3.1</b> reactR</a></li>
<li class="chapter" data-level="1.3.2" data-path="overview.html"><a href="overview.html#r2d3"><i class="fa fa-check"></i><b>1.3.2</b> r2d3</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="2" data-path="prerequisites.html"><a href="prerequisites.html"><i class="fa fa-check"></i><b>2</b> Prerequisites</a>
<ul>
<li class="chapter" data-level="2.1" data-path="prerequisites.html"><a href="prerequisites.html#r-package-development"><i class="fa fa-check"></i><b>2.1</b> R Package Development</a>
<ul>
<li class="chapter" data-level="2.1.1" data-path="prerequisites.html"><a href="prerequisites.html#creating-a-package"><i class="fa fa-check"></i><b>2.1.1</b> Creating a Package</a></li>
<li class="chapter" data-level="2.1.2" data-path="prerequisites.html"><a href="prerequisites.html#metadata"><i class="fa fa-check"></i><b>2.1.2</b> Metadata</a></li>
<li class="chapter" data-level="2.1.3" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>2.1.3</b> R code</a></li>
<li class="chapter" data-level="2.1.4" data-path="prerequisites.html"><a href="prerequisites.html#documentation"><i class="fa fa-check"></i><b>2.1.4</b> Documentation</a></li>
<li class="chapter" data-level="2.1.5" data-path="prerequisites.html"><a href="prerequisites.html#installed-files"><i class="fa fa-check"></i><b>2.1.5</b> Installed files</a></li>
<li class="chapter" data-level="2.1.6" data-path="prerequisites.html"><a href="prerequisites.html#build-load-and-install"><i class="fa fa-check"></i><b>2.1.6</b> Build, load, and install</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="prerequisites.html"><a href="prerequisites.html#json"><i class="fa fa-check"></i><b>2.2</b> JSON</a>
<ul>
<li class="chapter" data-level="2.2.1" data-path="prerequisites.html"><a href="prerequisites.html#serialising"><i class="fa fa-check"></i><b>2.2.1</b> Serialising</a></li>
<li class="chapter" data-level="2.2.2" data-path="prerequisites.html"><a href="prerequisites.html#tabular-data"><i class="fa fa-check"></i><b>2.2.2</b> Tabular data</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>2.3</b> JavaScript</a>
<ul>
<li class="chapter" data-level="2.3.1" data-path="prerequisites.html"><a href="prerequisites.html#developer-tools"><i class="fa fa-check"></i><b>2.3.1</b> Developer tools</a></li>
<li class="chapter" data-level="2.3.2" data-path="prerequisites.html"><a href="prerequisites.html#variable-declaration-and-scope"><i class="fa fa-check"></i><b>2.3.2</b> Variable declaration and scope</a></li>
<li class="chapter" data-level="2.3.3" data-path="prerequisites.html"><a href="prerequisites.html#document-object-model"><i class="fa fa-check"></i><b>2.3.3</b> Document object model</a></li>
</ul></li>
<li class="chapter" data-level="2.4" data-path="overview.html"><a href="overview.html#shiny"><i class="fa fa-check"></i><b>2.4</b> Shiny</a>
<ul>
<li class="chapter" data-level="2.4.1" data-path="prerequisites.html"><a href="prerequisites.html#htmltools"><i class="fa fa-check"></i><b>2.4.1</b> Htmltools</a></li>
<li class="chapter" data-level="2.4.2" data-path="prerequisites.html"><a href="prerequisites.html#static-files"><i class="fa fa-check"></i><b>2.4.2</b> Static files</a></li>
<li class="chapter" data-level="2.4.3" data-path="prerequisites.html"><a href="prerequisites.html#dependencies-pros-and-cons"><i class="fa fa-check"></i><b>2.4.3</b> Dependencies Pros and Cons</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II Data Visualisation</b></span></li>
<li class="chapter" data-level="3" data-path="introduction-to-widgets.html"><a href="introduction-to-widgets.html"><i class="fa fa-check"></i><b>3</b> Introduction to Widgets</a>
<ul>
<li class="chapter" data-level="3.1" data-path="introduction-to-widgets.html"><a href="introduction-to-widgets.html#plotly-package"><i class="fa fa-check"></i><b>3.1</b> Plotly package</a></li>
<li class="chapter" data-level="3.2" data-path="introduction-to-widgets.html"><a href="introduction-to-widgets.html#dt-package"><i class="fa fa-check"></i><b>3.2</b> DT package</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html"><i class="fa fa-check"></i><b>4</b> Basics of Building Widgets</a>
<ul>
<li class="chapter" data-level="4.1" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#candidate-libraries"><i class="fa fa-check"></i><b>4.1</b> Candidate Libraries</a>
<ul>
<li class="chapter" data-level="4.1.1" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#plotly.js"><i class="fa fa-check"></i><b>4.1.1</b> Plotly.js</a></li>
<li class="chapter" data-level="4.1.2" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#highchart.js"><i class="fa fa-check"></i><b>4.1.2</b> Highchart.js</a></li>
<li class="chapter" data-level="4.1.3" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#chart.js"><i class="fa fa-check"></i><b>4.1.3</b> Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="4.2" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#how-it-works"><i class="fa fa-check"></i><b>4.2</b> How it works</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="your-first-widget.html"><a href="your-first-widget.html"><i class="fa fa-check"></i><b>5</b> Your First Widget</a>
<ul>
<li class="chapter" data-level="5.1" data-path="your-first-widget.html"><a href="your-first-widget.html#the-htmlwidgets-scaffold"><i class="fa fa-check"></i><b>5.1</b> The Htmlwidgets Scaffold</a></li>
<li class="chapter" data-level="5.2" data-path="your-first-widget.html"><a href="your-first-widget.html#the-html-output"><i class="fa fa-check"></i><b>5.2</b> The HTML Output</a></li>
<li class="chapter" data-level="5.3" data-path="your-first-widget.html"><a href="your-first-widget.html#htmlwidgets-javascript-files"><i class="fa fa-check"></i><b>5.3</b> Htmlwidgets JavaScript Files</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html"><i class="fa fa-check"></i><b>6</b> A Realistic Widget</a>
<ul>
<li class="chapter" data-level="6.1" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#peity.js-dependencies"><i class="fa fa-check"></i><b>6.1</b> Peity.js Dependencies</a></li>
<li class="chapter" data-level="6.2" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#peity.js-implementation"><i class="fa fa-check"></i><b>6.2</b> Peity.js Implementation</a></li>
<li class="chapter" data-level="6.3" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#peity.js-html-element"><i class="fa fa-check"></i><b>6.3</b> Peity.js HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="the-full-monty.html"><a href="the-full-monty.html"><i class="fa fa-check"></i><b>7</b> The Full Monty</a>
<ul>
<li class="chapter" data-level="7.1" data-path="the-full-monty.html"><a href="the-full-monty.html#gio.js-dependencies"><i class="fa fa-check"></i><b>7.1</b> Gio.js Dependencies</a></li>
<li class="chapter" data-level="7.2" data-path="the-full-monty.html"><a href="the-full-monty.html#gio.js-javascript"><i class="fa fa-check"></i><b>7.2</b> Gio.js JavaScript</a></li>
<li class="chapter" data-level="7.3" data-path="the-full-monty.html"><a href="the-full-monty.html#working-with-data"><i class="fa fa-check"></i><b>7.3</b> Working with Data</a></li>
<li class="chapter" data-level="7.4" data-path="the-full-monty.html"><a href="the-full-monty.html#transforming-data"><i class="fa fa-check"></i><b>7.4</b> Transforming Data</a>
<ul>
<li class="chapter" data-level="7.4.1" data-path="the-full-monty.html"><a href="the-full-monty.html#using-javascript"><i class="fa fa-check"></i><b>7.4.1</b> Using JavaScript</a></li>
<li class="chapter" data-level="7.4.2" data-path="the-full-monty.html"><a href="the-full-monty.html#using-r"><i class="fa fa-check"></i><b>7.4.2</b> Using R</a></li>
<li class="chapter" data-level="7.4.3" data-path="the-full-monty.html"><a href="the-full-monty.html#pros-cons"><i class="fa fa-check"></i><b>7.4.3</b> Pros &amp; Cons</a></li>
</ul></li>
<li class="chapter" data-level="7.5" data-path="the-full-monty.html"><a href="the-full-monty.html#on-print-method"><i class="fa fa-check"></i><b>7.5</b> On Print Method</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="advanced-topics.html"><a href="advanced-topics.html"><i class="fa fa-check"></i><b>8</b> Advanced Topics</a>
<ul>
<li class="chapter" data-level="8.1" data-path="advanced-topics.html"><a href="advanced-topics.html#shared-variables"><i class="fa fa-check"></i><b>8.1</b> Shared Variables</a>
<ul>
<li class="chapter" data-level="8.1.1" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing"><i class="fa fa-check"></i><b>8.1.1</b> Sizing</a></li>
<li class="chapter" data-level="8.1.2" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing-policy"><i class="fa fa-check"></i><b>8.1.2</b> Sizing Policy</a></li>
</ul></li>
<li class="chapter" data-level="8.2" data-path="advanced-topics.html"><a href="advanced-topics.html#resizing"><i class="fa fa-check"></i><b>8.2</b> Resizing</a></li>
<li class="chapter" data-level="8.3" data-path="advanced-topics.html"><a href="advanced-topics.html#pre-render-hooks-security"><i class="fa fa-check"></i><b>8.3</b> Pre Render Hooks &amp; Security</a></li>
<li class="chapter" data-level="8.4" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>8.4</b> JavaScript Code</a></li>
<li class="chapter" data-level="8.5" data-path="advanced-topics.html"><a href="advanced-topics.html#prepend-append-content"><i class="fa fa-check"></i><b>8.5</b> Prepend &amp; Append Content</a></li>
<li class="chapter" data-level="8.6" data-path="advanced-topics.html"><a href="advanced-topics.html#dependencies"><i class="fa fa-check"></i><b>8.6</b> Dependencies</a></li>
<li class="chapter" data-level="8.7" data-path="advanced-topics.html"><a href="advanced-topics.html#compatibility"><i class="fa fa-check"></i><b>8.7</b> Compatibility</a></li>
<li class="chapter" data-level="8.8" data-path="advanced-topics.html"><a href="advanced-topics.html#unit-tests"><i class="fa fa-check"></i><b>8.8</b> Unit Tests</a></li>
<li class="chapter" data-level="8.9" data-path="advanced-topics.html"><a href="advanced-topics.html#performances"><i class="fa fa-check"></i><b>8.9</b> Performances</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="linking-widgets.html"><a href="linking-widgets.html"><i class="fa fa-check"></i><b>9</b> Linking Widgets</a>
<ul>
<li class="chapter" data-level="9.1" data-path="linking-widgets.html"><a href="linking-widgets.html#crosstalk-examples"><i class="fa fa-check"></i><b>9.1</b> Crosstalk examples</a></li>
<li class="chapter" data-level="9.2" data-path="linking-widgets.html"><a href="linking-widgets.html#crosstalk-requirements"><i class="fa fa-check"></i><b>9.2</b> Crosstalk requirements</a></li>
<li class="chapter" data-level="9.3" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#how-it-works"><i class="fa fa-check"></i><b>9.3</b> How it works</a></li>
<li class="chapter" data-level="9.4" data-path="linking-widgets.html"><a href="linking-widgets.html#crosstalk-with-gio"><i class="fa fa-check"></i><b>9.4</b> Crosstalk with gio</a></li>
<li class="chapter" data-level="9.5" data-path="linking-widgets.html"><a href="linking-widgets.html#adapt-the-r-code"><i class="fa fa-check"></i><b>9.5</b> Adapt the R code</a></li>
<li class="chapter" data-level="9.6" data-path="linking-widgets.html"><a href="linking-widgets.html#change-the-javascript-code"><i class="fa fa-check"></i><b>9.6</b> Change the JavaScript code</a>
<ul>
<li class="chapter" data-level="9.6.1" data-path="linking-widgets.html"><a href="linking-widgets.html#send-selected-keys"><i class="fa fa-check"></i><b>9.6.1</b> Send selected keys</a></li>
<li class="chapter" data-level="9.6.2" data-path="linking-widgets.html"><a href="linking-widgets.html#set-selected-keys"><i class="fa fa-check"></i><b>9.6.2</b> Set selected keys</a></li>
<li class="chapter" data-level="9.6.3" data-path="linking-widgets.html"><a href="linking-widgets.html#recap-javascript-code"><i class="fa fa-check"></i><b>9.6.3</b> Recap JavaScript code</a></li>
</ul></li>
<li class="chapter" data-level="9.7" data-path="linking-widgets.html"><a href="linking-widgets.html#using-crosstalk-with-gio"><i class="fa fa-check"></i><b>9.7</b> Using crosstalk with gio</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="final-revisions.html"><a href="final-revisions.html"><i class="fa fa-check"></i><b>10</b> Final Revisions</a>
<ul>
<li class="chapter" data-level="10.1" data-path="final-revisions.html"><a href="final-revisions.html#htmlwidgets-data"><i class="fa fa-check"></i><b>10.1</b> Htmlwidgets &amp; Data</a></li>
<li class="chapter" data-level="10.2" data-path="final-revisions.html"><a href="final-revisions.html#plethora-of-options"><i class="fa fa-check"></i><b>10.2</b> Plethora of Options</a></li>
<li class="chapter" data-level="10.3" data-path="final-revisions.html"><a href="final-revisions.html#interface-design"><i class="fa fa-check"></i><b>10.3</b> Interface Design</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="excercise-ploty.html"><a href="excercise-ploty.html"><i class="fa fa-check"></i><b>11</b> Excercise - Ploty</a>
<ul>
<li class="chapter" data-level="11.1" data-path="excercise-ploty.html"><a href="excercise-ploty.html#discover-plotly"><i class="fa fa-check"></i><b>11.1</b> Discover Plotly</a></li>
<li class="chapter" data-level="11.2" data-path="excercise-ploty.html"><a href="excercise-ploty.html#basics-of-plotly"><i class="fa fa-check"></i><b>11.2</b> Basics of Plotly</a></li>
<li class="chapter" data-level="11.3" data-path="excercise-ploty.html"><a href="excercise-ploty.html#plotly.js-to-r"><i class="fa fa-check"></i><b>11.3</b> Plotly.js to R</a></li>
<li class="chapter" data-level="11.4" data-path="excercise-ploty.html"><a href="excercise-ploty.html#r-to-plotly.js"><i class="fa fa-check"></i><b>11.4</b> R to Plotly.js</a></li>
<li class="chapter" data-level="11.5" data-path="excercise-ploty.html"><a href="excercise-ploty.html#size-resize-plotly.js"><i class="fa fa-check"></i><b>11.5</b> Size &amp; Resize Plotly.js</a></li>
<li class="chapter" data-level="11.6" data-path="excercise-ploty.html"><a href="excercise-ploty.html#performance-security-with-plotly.js"><i class="fa fa-check"></i><b>11.6</b> Performance &amp; Security with Plotly.js</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="12" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html"><i class="fa fa-check"></i><b>12</b> Introduction to Shiny</a>
<ul>
<li class="chapter" data-level="12.1" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#websocket-shiny"><i class="fa fa-check"></i><b>12.1</b> Websocket &amp; Shiny</a></li>
<li class="chapter" data-level="12.2" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-an-example"><i class="fa fa-check"></i><b>12.2</b> Alerts, An Example</a></li>
<li class="chapter" data-level="12.3" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-r-to-js"><i class="fa fa-check"></i><b>12.3</b> From R to JavaScript</a></li>
<li class="chapter" data-level="12.4" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-js-to-r"><i class="fa fa-check"></i><b>12.4</b> From JavaScript to R</a></li>
<li class="chapter" data-level="12.5" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-deserialise"><i class="fa fa-check"></i><b>12.5</b> Deserialise</a></li>
</ul></li>
<li class="chapter" data-level="13" data-path="a-complete-integration.html"><a href="a-complete-integration.html"><i class="fa fa-check"></i><b>13</b> A Complete Integration</a>
<ul>
<li class="chapter" data-level="13.1" data-path="a-complete-integration.html"><a href="a-complete-integration.html#serialisation"><i class="fa fa-check"></i><b>13.1</b> Serialisation</a></li>
<li class="chapter" data-level="13.2" data-path="a-complete-integration.html"><a href="a-complete-integration.html#events-callbacks"><i class="fa fa-check"></i><b>13.2</b> Events &amp; Callbacks</a></li>
<li class="chapter" data-level="13.3" data-path="a-complete-integration.html"><a href="a-complete-integration.html#as-a-package"><i class="fa fa-check"></i><b>13.3</b> As a Package</a>
<ul>
<li class="chapter" data-level="13.3.1" data-path="advanced-topics.html"><a href="advanced-topics.html#dependencies"><i class="fa fa-check"></i><b>13.3.1</b> Dependencies</a></li>
<li class="chapter" data-level="13.3.2" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>13.3.2</b> R Code</a></li>
<li class="chapter" data-level="13.3.3" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>13.3.3</b> JavaScript Code</a></li>
<li class="chapter" data-level="13.3.4" data-path="a-complete-integration.html"><a href="a-complete-integration.html#input-handler"><i class="fa fa-check"></i><b>13.3.4</b> Input Handler</a></li>
<li class="chapter" data-level="13.3.5" data-path="a-complete-integration.html"><a href="a-complete-integration.html#wrapping-up"><i class="fa fa-check"></i><b>13.3.5</b> Wrapping up</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="14" data-path="tips-tricks.html"><a href="tips-tricks.html"><i class="fa fa-check"></i><b>14</b> Tips &amp; Tricks</a>
<ul>
<li class="chapter" data-level="14.1" data-path="tips-tricks.html"><a href="tips-tricks.html#shiny-events"><i class="fa fa-check"></i><b>14.1</b> Shiny Events</a></li>
<li class="chapter" data-level="14.2" data-path="tips-tricks.html"><a href="tips-tricks.html#table-buttons"><i class="fa fa-check"></i><b>14.2</b> Table Buttons</a></li>
<li class="chapter" data-level="14.3" data-path="tips-tricks.html"><a href="tips-tricks.html#jquery---toggle"><i class="fa fa-check"></i><b>14.3</b> jQuery - Toggle</a></li>
</ul></li>
<li class="chapter" data-level="15" data-path="custom-outputs.html"><a href="custom-outputs.html"><i class="fa fa-check"></i><b>15</b> Custom Outputs</a>
<ul>
<li class="chapter" data-level="15.1" data-path="custom-outputs.html"><a href="custom-outputs.html#custom-outputs-inner-workings"><i class="fa fa-check"></i><b>15.1</b> Custom Outputs Inner-workings</a></li>
<li class="chapter" data-level="15.2" data-path="custom-outputs.html"><a href="custom-outputs.html#setup-custom-output"><i class="fa fa-check"></i><b>15.2</b> Setup Custom Output</a></li>
<li class="chapter" data-level="15.3" data-path="custom-outputs.html"><a href="custom-outputs.html#output-r-function"><i class="fa fa-check"></i><b>15.3</b> Output R Function</a></li>
<li class="chapter" data-level="15.4" data-path="custom-outputs.html"><a href="custom-outputs.html#generate-output-html"><i class="fa fa-check"></i><b>15.4</b> Generate Output HTML</a></li>
<li class="chapter" data-level="15.5" data-path="custom-outputs.html"><a href="custom-outputs.html#output-renderer"><i class="fa fa-check"></i><b>15.5</b> Output Renderer</a></li>
<li class="chapter" data-level="15.6" data-path="custom-outputs.html"><a href="custom-outputs.html#javascript-output-binding"><i class="fa fa-check"></i><b>15.6</b> JavaScript Output Binding</a>
<ul>
<li class="chapter" data-level="15.6.1" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-title"><i class="fa fa-check"></i><b>15.6.1</b> Boxxy title</a></li>
<li class="chapter" data-level="15.6.2" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-value"><i class="fa fa-check"></i><b>15.6.2</b> Boxxy value</a></li>
<li class="chapter" data-level="15.6.3" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-background-color"><i class="fa fa-check"></i><b>15.6.3</b> Boxxy Background Color</a></li>
<li class="chapter" data-level="15.6.4" data-path="custom-outputs.html"><a href="custom-outputs.html#register-the-output-binding"><i class="fa fa-check"></i><b>15.6.4</b> Register the Output Binding</a></li>
</ul></li>
<li class="chapter" data-level="15.7" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-usage"><i class="fa fa-check"></i><b>15.7</b> Boxxy Usage</a></li>
<li class="chapter" data-level="15.8" data-path="custom-outputs.html"><a href="custom-outputs.html#injecting-dependencies"><i class="fa fa-check"></i><b>15.8</b> Injecting Dependencies</a></li>
<li class="chapter" data-level="15.9" data-path="custom-outputs.html"><a href="custom-outputs.html#preprocessing-custom-outputs"><i class="fa fa-check"></i><b>15.9</b> Preprocessing Custom Outputs</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="custom-inputs.html"><a href="custom-inputs.html"><i class="fa fa-check"></i><b>16</b> Custom Inputs</a>
<ul>
<li class="chapter" data-level="16.1" data-path="custom-inputs.html"><a href="custom-inputs.html#setup-custom-input"><i class="fa fa-check"></i><b>16.1</b> Setup Custom Input</a></li>
<li class="chapter" data-level="16.2" data-path="custom-inputs.html"><a href="custom-inputs.html#switch-input-html-style"><i class="fa fa-check"></i><b>16.2</b> Switch Input HTML &amp; Style</a></li>
<li class="chapter" data-level="16.3" data-path="custom-inputs.html"><a href="custom-inputs.html#generate-input-html"><i class="fa fa-check"></i><b>16.3</b> Generate Input HTML</a></li>
<li class="chapter" data-level="16.4" data-path="custom-inputs.html"><a href="custom-inputs.html#javascript-input-binding"><i class="fa fa-check"></i><b>16.4</b> JavaScript Input Binding</a>
<ul>
<li class="chapter" data-level="16.4.1" data-path="custom-inputs.html"><a href="custom-inputs.html#find-inputs"><i class="fa fa-check"></i><b>16.4.1</b> Find Inputs</a></li>
<li class="chapter" data-level="16.4.2" data-path="custom-inputs.html"><a href="custom-inputs.html#get-input-id"><i class="fa fa-check"></i><b>16.4.2</b> Get Input Id</a></li>
<li class="chapter" data-level="16.4.3" data-path="custom-inputs.html"><a href="custom-inputs.html#get-input-value"><i class="fa fa-check"></i><b>16.4.3</b> Get Input Value</a></li>
<li class="chapter" data-level="16.4.4" data-path="custom-inputs.html"><a href="custom-inputs.html#set-input-value"><i class="fa fa-check"></i><b>16.4.4</b> Set Input Value</a></li>
<li class="chapter" data-level="16.4.5" data-path="custom-inputs.html"><a href="custom-inputs.html#receive-input-messages"><i class="fa fa-check"></i><b>16.4.5</b> Receive Input Messages</a></li>
<li class="chapter" data-level="16.4.6" data-path="custom-inputs.html"><a href="custom-inputs.html#subscribe-unsubscribe-inputs"><i class="fa fa-check"></i><b>16.4.6</b> Subscribe &amp; Unsubscribe Inputs</a></li>
<li class="chapter" data-level="16.4.7" data-path="custom-inputs.html"><a href="custom-inputs.html#input-rate-policy"><i class="fa fa-check"></i><b>16.4.7</b> Input Rate Policy</a></li>
<li class="chapter" data-level="16.4.8" data-path="custom-inputs.html"><a href="custom-inputs.html#registering-the-input"><i class="fa fa-check"></i><b>16.4.8</b> Registering the Input</a></li>
</ul></li>
<li class="chapter" data-level="16.5" data-path="custom-inputs.html"><a href="custom-inputs.html#update-input"><i class="fa fa-check"></i><b>16.5</b> Update Input</a></li>
<li class="chapter" data-level="16.6" data-path="custom-inputs.html"><a href="custom-inputs.html#exercise"><i class="fa fa-check"></i><b>16.6</b> Exercise</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="cookies.html"><a href="cookies.html"><i class="fa fa-check"></i><b>17</b> Cookies</a>
<ul>
<li class="chapter" data-level="17.1" data-path="cookies.html"><a href="cookies.html#discover-js-cookie"><i class="fa fa-check"></i><b>17.1</b> Discover js-cookie</a></li>
<li class="chapter" data-level="17.2" data-path="cookies.html"><a href="cookies.html#setup-cookies-project"><i class="fa fa-check"></i><b>17.2</b> Setup Cookies Project</a></li>
<li class="chapter" data-level="17.3" data-path="cookies.html"><a href="cookies.html#javascript-cookies"><i class="fa fa-check"></i><b>17.3</b> JavaScript Cookies</a></li>
<li class="chapter" data-level="17.4" data-path="cookies.html"><a href="cookies.html#r-code-for-cookies"><i class="fa fa-check"></i><b>17.4</b> R Code for Cookies</a></li>
</ul></li>
<li class="chapter" data-level="18" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html"><i class="fa fa-check"></i><b>18</b> Widgets with Shiny</a>
<ul>
<li class="chapter" data-level="18.1" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#widgets-to-r"><i class="fa fa-check"></i><b>18.1</b> Widgets to R</a></li>
<li class="chapter" data-level="18.2" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#input-handlers-for-widgets"><i class="fa fa-check"></i><b>18.2</b> Input Handlers for Widgets</a></li>
<li class="chapter" data-level="18.3" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#r-to-widgets"><i class="fa fa-check"></i><b>18.3</b> R to Widgets</a>
<ul>
<li class="chapter" data-level="18.3.1" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#send-data-from-widgets"><i class="fa fa-check"></i><b>18.3.1</b> Send Data from Widgets</a></li>
<li class="chapter" data-level="18.3.2" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#retrieve-widget-instance"><i class="fa fa-check"></i><b>18.3.2</b> Retrieve Widget Instance</a></li>
<li class="chapter" data-level="18.3.3" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#handle-data"><i class="fa fa-check"></i><b>18.3.3</b> Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="18.4" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#proxy-function"><i class="fa fa-check"></i><b>18.4</b> Proxy Function</a></li>
<li class="chapter" data-level="18.5" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#clear-data"><i class="fa fa-check"></i><b>18.5</b> Clear Data</a></li>
<li class="chapter" data-level="18.6" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#update-the-widget"><i class="fa fa-check"></i><b>18.6</b> Update the Widget</a></li>
</ul></li>
<li class="part"><span><b>IV Interactive Documents</b></span></li>
<li class="chapter" data-level="19" data-path="introduction-to-rmarkdown.html"><a href="introduction-to-rmarkdown.html"><i class="fa fa-check"></i><b>19</b> Introduction to Rmarkdown</a></li>
<li class="part"><span><b>V JavaScript for Computations</b></span></li>
<li class="chapter" data-level="20" data-path="the-v8-engine.html"><a href="the-v8-engine.html"><i class="fa fa-check"></i><b>20</b> The V8 Engine</a>
<ul>
<li class="chapter" data-level="20.1" data-path="the-v8-engine.html"><a href="the-v8-engine.html#installation"><i class="fa fa-check"></i><b>20.1</b> Installation</a></li>
<li class="chapter" data-level="20.2" data-path="the-v8-engine.html"><a href="the-v8-engine.html#basics"><i class="fa fa-check"></i><b>20.2</b> Basics</a></li>
<li class="chapter" data-level="20.3" data-path="the-v8-engine.html"><a href="the-v8-engine.html#external-libraries"><i class="fa fa-check"></i><b>20.3</b> External Libraries</a></li>
<li class="chapter" data-level="20.4" data-path="the-v8-engine.html"><a href="the-v8-engine.html#with-npm"><i class="fa fa-check"></i><b>20.4</b> With Npm</a></li>
<li class="chapter" data-level="20.5" data-path="the-v8-engine.html"><a href="the-v8-engine.html#use-in-packages"><i class="fa fa-check"></i><b>20.5</b> Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="exercise-machine-learning.html"><a href="exercise-machine-learning.html"><i class="fa fa-check"></i><b>21</b> Exercise - Machine Learning</a>
<ul>
<li class="chapter" data-level="21.1" data-path="exercise-machine-learning.html"><a href="exercise-machine-learning.html#dependency"><i class="fa fa-check"></i><b>21.1</b> Dependency</a></li>
<li class="chapter" data-level="21.2" data-path="exercise-machine-learning.html"><a href="exercise-machine-learning.html#simple-regression"><i class="fa fa-check"></i><b>21.2</b> Simple Regression</a></li>
</ul></li>
<li class="part"><span><b>VI Examples</b></span></li>
<li class="chapter" data-level="22" data-path="image-classifier.html"><a href="image-classifier.html"><i class="fa fa-check"></i><b>22</b> Image Classifier</a>
<ul>
<li class="chapter" data-level="22.1" data-path="image-classifier.html"><a href="image-classifier.html#discover"><i class="fa fa-check"></i><b>22.1</b> Discover</a></li>
<li class="chapter" data-level="22.2" data-path="image-classifier.html"><a href="image-classifier.html#setup"><i class="fa fa-check"></i><b>22.2</b> Setup</a></li>
<li class="chapter" data-level="22.3" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>22.3</b> JavaScript</a></li>
<li class="chapter" data-level="22.4" data-path="a-complete-integration.html"><a href="a-complete-integration.html#input-handler"><i class="fa fa-check"></i><b>22.4</b> Input Handler</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="progress-bar.html"><a href="progress-bar.html"><i class="fa fa-check"></i><b>23</b> Progress Bar</a>
<ul>
<li class="chapter" data-level="23.1" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>23.1</b> R code</a></li>
<li class="chapter" data-level="23.2" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>23.2</b> JavaScript code</a></li>
<li class="chapter" data-level="23.3" data-path="progress-bar.html"><a href="progress-bar.html#events"><i class="fa fa-check"></i><b>23.3</b> Events</a></li>
</ul></li>
<li class="part"><span><b>VII Closing Remarks</b></span></li>
<li class="chapter" data-level="24" data-path="conclusion.html"><a href="conclusion.html"><i class="fa fa-check"></i><b>24</b> Conclusion</a>
<ul>
<li class="chapter" data-level="24.1" data-path="advanced-topics.html"><a href="advanced-topics.html#performances"><i class="fa fa-check"></i><b>24.1</b> Performances</a></li>
<li class="chapter" data-level="24.2" data-path="conclusion.html"><a href="conclusion.html#road-ahead"><i class="fa fa-check"></i><b>24.2</b> Road ahead</a>
<ul>
<li class="chapter" data-level="24.2.1" data-path="conclusion.html"><a href="conclusion.html#computation"><i class="fa fa-check"></i><b>24.2.1</b> Computation</a></li>
<li class="chapter" data-level="24.2.2" data-path="overview.html"><a href="overview.html#shiny"><i class="fa fa-check"></i><b>24.2.2</b> Shiny</a></li>
<li class="chapter" data-level="24.2.3" data-path="overview.html"><a href="overview.html#htmlwidgets"><i class="fa fa-check"></i><b>24.2.3</b> htmlwidgets</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="excercise---ploty" class="section level1" number="11">
<h1><span class="header-section-number">Chapter 11</span> Excercise - Ploty</h1>
<p>In this chapter we build a widget for plotly.js, or a tiny part of it; it’ll allow drawing a scatter and line plot and have some additional functionalities in shiny. The aim of this chapter is to demonstrate how easily one can transfer take aways from building the gio widget to build another.</p>
<div id="discover-plotly" class="section level2" number="11.1">
<h2><span class="header-section-number">11.1</span> Discover Plotly</h2>
<p>Below is a basic example from the <a href="https://plotly.com/javascript/line-and-scatter/">plotly website</a>. We will aim to reproduce it using htmlwidgets before improving upon it.</p>
<div class="sourceCode" id="cb224"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb224-1"><a href="excercise-ploty.html#cb224-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb224-2"><a href="excercise-ploty.html#cb224-2"></a><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></span>
<span id="cb224-3"><a href="excercise-ploty.html#cb224-3"></a></span>
<span id="cb224-4"><a href="excercise-ploty.html#cb224-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb224-5"><a href="excercise-ploty.html#cb224-5"></a>  <span class="co">&lt;!-- Import library --&gt;</span></span>
<span id="cb224-6"><a href="excercise-ploty.html#cb224-6"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;plotly-latest.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb224-7"><a href="excercise-ploty.html#cb224-7"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb224-8"><a href="excercise-ploty.html#cb224-8"></a></span>
<span id="cb224-9"><a href="excercise-ploty.html#cb224-9"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb224-10"><a href="excercise-ploty.html#cb224-10"></a>  <span class="co">&lt;!-- div to hold visualisation --&gt;</span></span>
<span id="cb224-11"><a href="excercise-ploty.html#cb224-11"></a>  <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;chart&quot;</span><span class="ot"> style=</span><span class="st">&quot;width:600px;height:250px;&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></span>
<span id="cb224-12"><a href="excercise-ploty.html#cb224-12"></a></span>
<span id="cb224-13"><a href="excercise-ploty.html#cb224-13"></a>  <span class="co">&lt;!-- Script to create visualisation --&gt;</span></span>
<span id="cb224-14"><a href="excercise-ploty.html#cb224-14"></a>  <span class="kw">&lt;script&gt;</span></span>
<span id="cb224-15"><a href="excercise-ploty.html#cb224-15"></a>    <span class="kw">var</span> trace1 <span class="op">=</span> {</span>
<span id="cb224-16"><a href="excercise-ploty.html#cb224-16"></a>      <span class="dt">x</span><span class="op">:</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span><span class="op">,</span> <span class="dv">4</span>]<span class="op">,</span></span>
<span id="cb224-17"><a href="excercise-ploty.html#cb224-17"></a>      <span class="dt">y</span><span class="op">:</span> [<span class="dv">10</span><span class="op">,</span> <span class="dv">15</span><span class="op">,</span> <span class="dv">13</span><span class="op">,</span> <span class="dv">17</span>]<span class="op">,</span></span>
<span id="cb224-18"><a href="excercise-ploty.html#cb224-18"></a>      <span class="dt">mode</span><span class="op">:</span> <span class="st">&#39;markers&#39;</span><span class="op">,</span></span>
<span id="cb224-19"><a href="excercise-ploty.html#cb224-19"></a>      <span class="dt">type</span><span class="op">:</span> <span class="st">&#39;scatter&#39;</span></span>
<span id="cb224-20"><a href="excercise-ploty.html#cb224-20"></a>    }<span class="op">;</span></span>
<span id="cb224-21"><a href="excercise-ploty.html#cb224-21"></a></span>
<span id="cb224-22"><a href="excercise-ploty.html#cb224-22"></a>    <span class="kw">var</span> trace2 <span class="op">=</span> {</span>
<span id="cb224-23"><a href="excercise-ploty.html#cb224-23"></a>      <span class="dt">x</span><span class="op">:</span> [<span class="dv">2</span><span class="op">,</span> <span class="dv">3</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">5</span>]<span class="op">,</span></span>
<span id="cb224-24"><a href="excercise-ploty.html#cb224-24"></a>      <span class="dt">y</span><span class="op">:</span> [<span class="dv">16</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">11</span><span class="op">,</span> <span class="dv">9</span>]<span class="op">,</span></span>
<span id="cb224-25"><a href="excercise-ploty.html#cb224-25"></a>      <span class="dt">mode</span><span class="op">:</span> <span class="st">&#39;lines&#39;</span><span class="op">,</span></span>
<span id="cb224-26"><a href="excercise-ploty.html#cb224-26"></a>      <span class="dt">type</span><span class="op">:</span> <span class="st">&#39;scatter&#39;</span></span>
<span id="cb224-27"><a href="excercise-ploty.html#cb224-27"></a>    }<span class="op">;</span></span>
<span id="cb224-28"><a href="excercise-ploty.html#cb224-28"></a></span>
<span id="cb224-29"><a href="excercise-ploty.html#cb224-29"></a>    <span class="kw">var</span> data <span class="op">=</span> [trace1<span class="op">,</span> trace2<span class="op">,</span> trace3]<span class="op">;</span></span>
<span id="cb224-30"><a href="excercise-ploty.html#cb224-30"></a></span>
<span id="cb224-31"><a href="excercise-ploty.html#cb224-31"></a>    Plotly<span class="op">.</span><span class="fu">newPlot</span>(<span class="st">&#39;chart&#39;</span><span class="op">,</span> data)<span class="op">;</span></span>
<span id="cb224-32"><a href="excercise-ploty.html#cb224-32"></a>    )<span class="op">;</span></span>
<span id="cb224-33"><a href="excercise-ploty.html#cb224-33"></a>  <span class="kw">&lt;/script&gt;</span></span>
<span id="cb224-34"><a href="excercise-ploty.html#cb224-34"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb224-35"><a href="excercise-ploty.html#cb224-35"></a></span>
<span id="cb224-36"><a href="excercise-ploty.html#cb224-36"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>The aim is to obtain an R interface resembling the already existing R package. It’ll allow initialising the visualisation with the <code>plotly</code> function and add a line or scatter plot with <code>plot_line</code> and <code>plot_marker</code>.</p>
<div class="sourceCode" id="cb225"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb225-1"><a href="excercise-ploty.html#cb225-1"></a><span class="kw">plotly</span>(<span class="dt">data =</span> cars) <span class="op">%&gt;%</span><span class="st"> </span></span>
<span id="cb225-2"><a href="excercise-ploty.html#cb225-2"></a><span class="st">  </span><span class="kw">plot_marker</span>(<span class="dt">x =</span> <span class="st">&quot;dist&quot;</span>, <span class="dt">y =</span> <span class="st">&quot;speed&quot;</span>)</span></code></pre></div>
</div>
<div id="basics-of-plotly" class="section level2" number="11.2">
<h2><span class="header-section-number">11.2</span> Basics of Plotly</h2>
<p>The story starts like all other widgets: create a package and scaffold the widget. We name the package plotlier so as to not override the local installation of the actual plotly package. We also add the magrittr pipe (<code>%&gt;%</code>) while we’re at it.</p>
<div class="sourceCode" id="cb226"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb226-1"><a href="excercise-ploty.html#cb226-1"></a>usethis<span class="op">::</span><span class="kw">create_package</span>(<span class="st">&quot;plotlier&quot;</span>) <span class="co"># create package</span></span>
<span id="cb226-2"><a href="excercise-ploty.html#cb226-2"></a>usethis<span class="op">::</span><span class="kw">scaffoldWidget</span>(<span class="st">&quot;plotly&quot;</span>) <span class="co"># scaffold plotly</span></span>
<span id="cb226-3"><a href="excercise-ploty.html#cb226-3"></a>usethis<span class="op">::</span><span class="kw">use_pipe</span>() <span class="co"># export pipe</span></span></code></pre></div>
<p>Then we download the dependency from the CDN, the latest version at the time of writing this is <code>1.54.2</code>, and edit the <code>plotly.yml</code> file to point to the downloaded file.</p>
<div class="sourceCode" id="cb227"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb227-1"><a href="excercise-ploty.html#cb227-1"></a><span class="kw">dir.create</span>(<span class="st">&quot;inst/htmlwidgets/plotly&quot;</span>, <span class="dt">recursive =</span> <span class="ot">TRUE</span>)</span>
<span id="cb227-2"><a href="excercise-ploty.html#cb227-2"></a>url &lt;-<span class="st"> &quot;https://cdn.plot.ly/plotly-1.54.2.min.js&quot;</span></span>
<span id="cb227-3"><a href="excercise-ploty.html#cb227-3"></a><span class="kw">download.file</span>(url, <span class="st">&quot;inst/htmlwidgets/plotly/plotly.min.js&quot;</span>)</span></code></pre></div>
<div class="sourceCode" id="cb228"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb228-1"><a href="excercise-ploty.html#cb228-1"></a><span class="fu">dependencies</span><span class="kw">:</span></span>
<span id="cb228-2"><a href="excercise-ploty.html#cb228-2"></a><span class="at"> </span><span class="kw">-</span><span class="at"> </span><span class="fu">name</span><span class="kw">:</span><span class="at"> plotly</span></span>
<span id="cb228-3"><a href="excercise-ploty.html#cb228-3"></a><span class="at">   </span><span class="fu">version</span><span class="kw">:</span><span class="at"> </span><span class="fl">1.54.2</span></span>
<span id="cb228-4"><a href="excercise-ploty.html#cb228-4"></a><span class="at">   </span><span class="fu">src</span><span class="kw">:</span><span class="at"> htmlwidgets/plotly</span></span>
<span id="cb228-5"><a href="excercise-ploty.html#cb228-5"></a><span class="at">   </span><span class="fu">script</span><span class="kw">:</span><span class="at"> plotly.min.js</span></span></code></pre></div>
<p>We start by editing the <code>plotly</code> function to accept a data frame which will be stored in the <code>x</code> object. The data will not be used in this very function but will be required when adding a line or marker plot.</p>
<div class="sourceCode" id="cb229"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb229-1"><a href="excercise-ploty.html#cb229-1"></a><span class="co">#&#39; @export</span></span>
<span id="cb229-2"><a href="excercise-ploty.html#cb229-2"></a>plotly &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, </span>
<span id="cb229-3"><a href="excercise-ploty.html#cb229-3"></a>  <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb229-4"><a href="excercise-ploty.html#cb229-4"></a></span>
<span id="cb229-5"><a href="excercise-ploty.html#cb229-5"></a>  <span class="co"># forward options using x</span></span>
<span id="cb229-6"><a href="excercise-ploty.html#cb229-6"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb229-7"><a href="excercise-ploty.html#cb229-7"></a>    <span class="dt">data =</span> data,</span>
<span id="cb229-8"><a href="excercise-ploty.html#cb229-8"></a>    <span class="dt">options =</span> <span class="kw">list</span>()</span>
<span id="cb229-9"><a href="excercise-ploty.html#cb229-9"></a>  )</span>
<span id="cb229-10"><a href="excercise-ploty.html#cb229-10"></a></span>
<span id="cb229-11"><a href="excercise-ploty.html#cb229-11"></a>  <span class="co"># create widget</span></span>
<span id="cb229-12"><a href="excercise-ploty.html#cb229-12"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb229-13"><a href="excercise-ploty.html#cb229-13"></a>    <span class="dt">name =</span> <span class="st">&#39;plotly&#39;</span>,</span>
<span id="cb229-14"><a href="excercise-ploty.html#cb229-14"></a>    x,</span>
<span id="cb229-15"><a href="excercise-ploty.html#cb229-15"></a>    <span class="dt">width =</span> width,</span>
<span id="cb229-16"><a href="excercise-ploty.html#cb229-16"></a>    <span class="dt">height =</span> height,</span>
<span id="cb229-17"><a href="excercise-ploty.html#cb229-17"></a>    <span class="dt">package =</span> <span class="st">&#39;plotlier&#39;</span>,</span>
<span id="cb229-18"><a href="excercise-ploty.html#cb229-18"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb229-19"><a href="excercise-ploty.html#cb229-19"></a>  )</span>
<span id="cb229-20"><a href="excercise-ploty.html#cb229-20"></a>}</span></code></pre></div>
<p>The JavaScript would look like the code below. It’s actually much easier than what had to be written for gio.js as the function to generate a new plot accepts 1) the id of the <code>&lt;div&gt;</code> where the plot should be created and 2) a JSON object of options (containing the data) which describes the plot.</p>
<div class="sourceCode" id="cb230"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb230-1"><a href="excercise-ploty.html#cb230-1"></a>HTMLWidgets<span class="op">.</span><span class="fu">widget</span>({</span>
<span id="cb230-2"><a href="excercise-ploty.html#cb230-2"></a></span>
<span id="cb230-3"><a href="excercise-ploty.html#cb230-3"></a>  <span class="dt">name</span><span class="op">:</span> <span class="st">&#39;plotly&#39;</span><span class="op">,</span></span>
<span id="cb230-4"><a href="excercise-ploty.html#cb230-4"></a></span>
<span id="cb230-5"><a href="excercise-ploty.html#cb230-5"></a>  <span class="dt">type</span><span class="op">:</span> <span class="st">&#39;output&#39;</span><span class="op">,</span></span>
<span id="cb230-6"><a href="excercise-ploty.html#cb230-6"></a></span>
<span id="cb230-7"><a href="excercise-ploty.html#cb230-7"></a>  <span class="dt">factory</span><span class="op">:</span> <span class="kw">function</span>(el<span class="op">,</span> width<span class="op">,</span> height) {</span>
<span id="cb230-8"><a href="excercise-ploty.html#cb230-8"></a></span>
<span id="cb230-9"><a href="excercise-ploty.html#cb230-9"></a>    <span class="cf">return</span> {</span>
<span id="cb230-10"><a href="excercise-ploty.html#cb230-10"></a></span>
<span id="cb230-11"><a href="excercise-ploty.html#cb230-11"></a>      <span class="dt">renderValue</span><span class="op">:</span> <span class="kw">function</span>(x) {</span>
<span id="cb230-12"><a href="excercise-ploty.html#cb230-12"></a></span>
<span id="cb230-13"><a href="excercise-ploty.html#cb230-13"></a>        <span class="co">// create plot</span></span>
<span id="cb230-14"><a href="excercise-ploty.html#cb230-14"></a>        Plotly<span class="op">.</span><span class="fu">newPlot</span>(el<span class="op">.</span><span class="at">id</span><span class="op">,</span> x<span class="op">.</span><span class="at">options</span>)<span class="op">;</span></span>
<span id="cb230-15"><a href="excercise-ploty.html#cb230-15"></a></span>
<span id="cb230-16"><a href="excercise-ploty.html#cb230-16"></a>      }<span class="op">,</span></span>
<span id="cb230-17"><a href="excercise-ploty.html#cb230-17"></a></span>
<span id="cb230-18"><a href="excercise-ploty.html#cb230-18"></a>      <span class="dt">resize</span><span class="op">:</span> <span class="kw">function</span>(width<span class="op">,</span> height) {</span>
<span id="cb230-19"><a href="excercise-ploty.html#cb230-19"></a></span>
<span id="cb230-20"><a href="excercise-ploty.html#cb230-20"></a>        <span class="co">// </span><span class="al">TODO</span><span class="co">: code to re-render the widget with a new size</span></span>
<span id="cb230-21"><a href="excercise-ploty.html#cb230-21"></a></span>
<span id="cb230-22"><a href="excercise-ploty.html#cb230-22"></a>      }</span>
<span id="cb230-23"><a href="excercise-ploty.html#cb230-23"></a></span>
<span id="cb230-24"><a href="excercise-ploty.html#cb230-24"></a>    }<span class="op">;</span></span>
<span id="cb230-25"><a href="excercise-ploty.html#cb230-25"></a>  }</span>
<span id="cb230-26"><a href="excercise-ploty.html#cb230-26"></a>})<span class="op">;</span></span></code></pre></div>
<p>Then it’s a matter of reproducing the JSON that defines what plotly describes as a “trace” and what more or less corresponds to a “geom” in ggplot2. A trace for a scatter plot is defined with the JSON below, which we can read in R to understand the shape of the list to reproduce.</p>
<div class="sourceCode" id="cb231"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb231-1"><a href="excercise-ploty.html#cb231-1"></a>jsonlite<span class="op">::</span><span class="kw">fromJSON</span>(<span class="st">&#39;{</span></span>
<span id="cb231-2"><a href="excercise-ploty.html#cb231-2"></a><span class="st">	&quot;x&quot;: [1, 2, 3, 4],</span></span>
<span id="cb231-3"><a href="excercise-ploty.html#cb231-3"></a><span class="st">	&quot;y&quot;: [10, 15, 13, 17],</span></span>
<span id="cb231-4"><a href="excercise-ploty.html#cb231-4"></a><span class="st">	&quot;mode&quot;: &quot;markers&quot;,</span></span>
<span id="cb231-5"><a href="excercise-ploty.html#cb231-5"></a><span class="st">	&quot;type&quot;: &quot;scatter&quot;</span></span>
<span id="cb231-6"><a href="excercise-ploty.html#cb231-6"></a><span class="st">}&#39;</span>)</span></code></pre></div>
<pre><code>## $x
## [1] 1 2 3 4
## 
## $y
## [1] 10 15 13 17
## 
## $mode
## [1] &quot;markers&quot;
## 
## $type
## [1] &quot;scatter&quot;</code></pre>
<p>We can then create a function that takes the name of the x and y columns to fetch from the data which is accessible from the plotly object with <code>p$x$data</code></p>
<div class="sourceCode" id="cb233"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb233-1"><a href="excercise-ploty.html#cb233-1"></a><span class="co">#&#39; @export</span></span>
<span id="cb233-2"><a href="excercise-ploty.html#cb233-2"></a>plot_marker &lt;-<span class="st"> </span><span class="cf">function</span>(p, x, y){</span>
<span id="cb233-3"><a href="excercise-ploty.html#cb233-3"></a>  layer &lt;-<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb233-4"><a href="excercise-ploty.html#cb233-4"></a>    <span class="dt">x =</span> p<span class="op">$</span>x<span class="op">$</span>data[[x]],</span>
<span id="cb233-5"><a href="excercise-ploty.html#cb233-5"></a>    <span class="dt">y =</span> p<span class="op">$</span>x<span class="op">$</span>data[[y]],</span>
<span id="cb233-6"><a href="excercise-ploty.html#cb233-6"></a>    <span class="dt">type =</span> <span class="st">&quot;scatter&quot;</span>,</span>
<span id="cb233-7"><a href="excercise-ploty.html#cb233-7"></a>    <span class="dt">mode =</span> <span class="st">&quot;markers&quot;</span></span>
<span id="cb233-8"><a href="excercise-ploty.html#cb233-8"></a>  )</span>
<span id="cb233-9"><a href="excercise-ploty.html#cb233-9"></a></span>
<span id="cb233-10"><a href="excercise-ploty.html#cb233-10"></a>  p<span class="op">$</span>x<span class="op">$</span>options &lt;-<span class="st"> </span><span class="kw">append</span>(p<span class="op">$</span>x<span class="op">$</span>options, <span class="kw">list</span>(layer))</span>
<span id="cb233-11"><a href="excercise-ploty.html#cb233-11"></a>  <span class="kw">return</span>(p)</span>
<span id="cb233-12"><a href="excercise-ploty.html#cb233-12"></a>}</span></code></pre></div>
<p>At this stage the functions <code>devtools::document</code> and <code>devtools::load_all</code> can be run so the package can be tested.</p>
<div class="sourceCode" id="cb234"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb234-1"><a href="excercise-ploty.html#cb234-1"></a><span class="kw">library</span>(plotlier)</span>
<span id="cb234-2"><a href="excercise-ploty.html#cb234-2"></a></span>
<span id="cb234-3"><a href="excercise-ploty.html#cb234-3"></a><span class="kw">plotly</span>(cars) <span class="op">%&gt;%</span><span class="st"> </span></span>
<span id="cb234-4"><a href="excercise-ploty.html#cb234-4"></a><span class="st">  </span><span class="kw">plot_marker</span>(<span class="st">&quot;dist&quot;</span>, <span class="st">&quot;speed&quot;</span>)</span></code></pre></div>
<div class="figure">
<img src="images/plotlier-scatter.png" alt="" />
<p class="caption">Plotlier Scatter plot</p>
</div>
</div>
<div id="plotly.js-to-r" class="section level2" number="11.3">
<h2><span class="header-section-number">11.3</span> Plotly.js to R</h2>
<p>We can now look up plotly’s documentation on <a href="https://plotly.com/javascript/plotlyjs-events/">callback</a> to send data to the R server when a point is clicked.</p>
<div class="sourceCode" id="cb235"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb235-1"><a href="excercise-ploty.html#cb235-1"></a><span class="op">...</span></span>
<span id="cb235-2"><a href="excercise-ploty.html#cb235-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) {</span>
<span id="cb235-3"><a href="excercise-ploty.html#cb235-3"></a></span>
<span id="cb235-4"><a href="excercise-ploty.html#cb235-4"></a>  Plotly<span class="op">.</span><span class="fu">newPlot</span>(el<span class="op">.</span><span class="at">id</span><span class="op">,</span> x<span class="op">.</span><span class="at">options</span>)<span class="op">;</span></span>
<span id="cb235-5"><a href="excercise-ploty.html#cb235-5"></a></span>
<span id="cb235-6"><a href="excercise-ploty.html#cb235-6"></a>  plot<span class="op">.</span><span class="fu">on</span>(<span class="st">&#39;plotly_click&#39;</span><span class="op">,</span> <span class="kw">function</span>(data){</span>
<span id="cb235-7"><a href="excercise-ploty.html#cb235-7"></a>    <span class="kw">var</span> coords <span class="op">=</span> [data<span class="op">.</span><span class="at">points</span>[<span class="dv">0</span>]<span class="op">.</span><span class="at">x</span><span class="op">,</span> data<span class="op">.</span><span class="at">points</span>[<span class="dv">0</span>]<span class="op">.</span><span class="at">y</span>]<span class="op">;</span></span>
<span id="cb235-8"><a href="excercise-ploty.html#cb235-8"></a>    Shiny<span class="op">.</span><span class="fu">setInputValue</span>(el<span class="op">.</span><span class="at">id</span> <span class="op">+</span> <span class="st">&#39;_clicked&#39;</span><span class="op">,</span> coords)<span class="op">;</span></span>
<span id="cb235-9"><a href="excercise-ploty.html#cb235-9"></a>  })<span class="op">;</span></span>
<span id="cb235-10"><a href="excercise-ploty.html#cb235-10"></a></span>
<span id="cb235-11"><a href="excercise-ploty.html#cb235-11"></a>}</span>
<span id="cb235-12"><a href="excercise-ploty.html#cb235-12"></a><span class="op">...</span></span></code></pre></div>
<p>Finally, we load the package’s functions using devtools to test the input.</p>
<div class="sourceCode" id="cb236"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb236-1"><a href="excercise-ploty.html#cb236-1"></a><span class="kw">library</span>(shiny)</span>
<span id="cb236-2"><a href="excercise-ploty.html#cb236-2"></a><span class="kw">library</span>(plotlier)</span>
<span id="cb236-3"><a href="excercise-ploty.html#cb236-3"></a></span>
<span id="cb236-4"><a href="excercise-ploty.html#cb236-4"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb236-5"><a href="excercise-ploty.html#cb236-5"></a>  <span class="kw">plotlyOutput</span>(<span class="st">&quot;plot&quot;</span>),</span>
<span id="cb236-6"><a href="excercise-ploty.html#cb236-6"></a>  <span class="kw">verbatimTextOutput</span>(<span class="st">&quot;clicked&quot;</span>)</span>
<span id="cb236-7"><a href="excercise-ploty.html#cb236-7"></a>)</span>
<span id="cb236-8"><a href="excercise-ploty.html#cb236-8"></a></span>
<span id="cb236-9"><a href="excercise-ploty.html#cb236-9"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output){</span>
<span id="cb236-10"><a href="excercise-ploty.html#cb236-10"></a></span>
<span id="cb236-11"><a href="excercise-ploty.html#cb236-11"></a>  output<span class="op">$</span>plot &lt;-<span class="st"> </span><span class="kw">renderPlotly</span>({</span>
<span id="cb236-12"><a href="excercise-ploty.html#cb236-12"></a>    <span class="kw">plotly</span>(cars) <span class="op">%&gt;%</span><span class="st"> </span></span>
<span id="cb236-13"><a href="excercise-ploty.html#cb236-13"></a><span class="st">      </span><span class="kw">plot_marker</span>(<span class="st">&quot;dist&quot;</span>, <span class="st">&quot;speed&quot;</span>)</span>
<span id="cb236-14"><a href="excercise-ploty.html#cb236-14"></a>  })</span>
<span id="cb236-15"><a href="excercise-ploty.html#cb236-15"></a></span>
<span id="cb236-16"><a href="excercise-ploty.html#cb236-16"></a>  output<span class="op">$</span>clicked &lt;-<span class="st"> </span><span class="kw">renderPrint</span>({</span>
<span id="cb236-17"><a href="excercise-ploty.html#cb236-17"></a>    <span class="kw">print</span>(input<span class="op">$</span>plot_clicked)</span>
<span id="cb236-18"><a href="excercise-ploty.html#cb236-18"></a>  })</span>
<span id="cb236-19"><a href="excercise-ploty.html#cb236-19"></a></span>
<span id="cb236-20"><a href="excercise-ploty.html#cb236-20"></a>}</span>
<span id="cb236-21"><a href="excercise-ploty.html#cb236-21"></a></span>
<span id="cb236-22"><a href="excercise-ploty.html#cb236-22"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
</div>
<div id="r-to-plotly.js" class="section level2" number="11.4">
<h2><span class="header-section-number">11.4</span> R to Plotly.js</h2>
<p>Here we implement an example of passing data from R to JavaScript, name the JavaScript <code>addTraces</code> function which allows dynamically adding traces to the chart without redrawing it in its entirety.</p>
<p>The JavaScript <code>addTraces</code> function takes the id of the chart to add the trace to and a JSON object that defines the trace.</p>
<div class="sourceCode" id="cb237"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb237-1"><a href="excercise-ploty.html#cb237-1"></a><span class="co">// addTraces example</span></span>
<span id="cb237-2"><a href="excercise-ploty.html#cb237-2"></a>Plotly<span class="op">.</span><span class="fu">addTraces</span>(<span class="st">&#39;plot&#39;</span><span class="op">,</span> {<span class="dt">y</span><span class="op">:</span> [<span class="dv">2</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">2</span>]})<span class="op">;</span></span></code></pre></div>
<p>We start, as done previously, by defining a “proxy,” a function that returns an object containing information necessary to add traces to the chart, namely the <code>id</code> of the chart to apply to and the <code>session</code> object which will be used to send the data.</p>
<div class="sourceCode" id="cb238"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb238-1"><a href="excercise-ploty.html#cb238-1"></a><span class="co">#&#39; @export</span></span>
<span id="cb238-2"><a href="excercise-ploty.html#cb238-2"></a>plotlyProxy &lt;-<span class="st"> </span><span class="cf">function</span>(id, </span>
<span id="cb238-3"><a href="excercise-ploty.html#cb238-3"></a>  <span class="dt">session =</span> shiny<span class="op">::</span><span class="kw">getDefaultReactiveDomain</span>()){</span>
<span id="cb238-4"><a href="excercise-ploty.html#cb238-4"></a>  <span class="kw">list</span>(</span>
<span id="cb238-5"><a href="excercise-ploty.html#cb238-5"></a>    <span class="dt">id =</span> id,</span>
<span id="cb238-6"><a href="excercise-ploty.html#cb238-6"></a>    <span class="dt">session =</span> session</span>
<span id="cb238-7"><a href="excercise-ploty.html#cb238-7"></a>  )</span>
<span id="cb238-8"><a href="excercise-ploty.html#cb238-8"></a>}</span></code></pre></div>
<p>We then create a function that creates the trace and sends that data, together with the plot <code>id</code>, to JavaScript as a message of type “add-traces.”</p>
<div class="sourceCode" id="cb239"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb239-1"><a href="excercise-ploty.html#cb239-1"></a><span class="co">#&#39; @export</span></span>
<span id="cb239-2"><a href="excercise-ploty.html#cb239-2"></a>plot_add_marker &lt;-<span class="st"> </span><span class="cf">function</span>(proxy, data, x, y){</span>
<span id="cb239-3"><a href="excercise-ploty.html#cb239-3"></a>  data &lt;-<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb239-4"><a href="excercise-ploty.html#cb239-4"></a>    <span class="dt">x =</span> data[[x]],</span>
<span id="cb239-5"><a href="excercise-ploty.html#cb239-5"></a>    <span class="dt">y =</span> data[[y]],</span>
<span id="cb239-6"><a href="excercise-ploty.html#cb239-6"></a>    <span class="dt">type =</span> <span class="st">&quot;scatter&quot;</span>,</span>
<span id="cb239-7"><a href="excercise-ploty.html#cb239-7"></a>    <span class="dt">mode =</span> <span class="st">&quot;markers&quot;</span></span>
<span id="cb239-8"><a href="excercise-ploty.html#cb239-8"></a>  )</span>
<span id="cb239-9"><a href="excercise-ploty.html#cb239-9"></a></span>
<span id="cb239-10"><a href="excercise-ploty.html#cb239-10"></a>  msg &lt;-<span class="st"> </span><span class="kw">list</span>(<span class="dt">id =</span> proxy<span class="op">$</span>id, <span class="dt">data =</span> data)</span>
<span id="cb239-11"><a href="excercise-ploty.html#cb239-11"></a>  proxy<span class="op">$</span>session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="st">&quot;add-traces&quot;</span>, msg)</span>
<span id="cb239-12"><a href="excercise-ploty.html#cb239-12"></a>  <span class="kw">return</span>(proxy)</span>
<span id="cb239-13"><a href="excercise-ploty.html#cb239-13"></a>}</span></code></pre></div>
<p>Finally, we add a message handler to handle the data sent to <code>add-traces</code> and use the JavaScript method <code>addTraces</code> to add a trace to the plot.</p>
<div class="sourceCode" id="cb240"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb240-1"><a href="excercise-ploty.html#cb240-1"></a><span class="cf">if</span>(HTMLWidgets<span class="op">.</span><span class="at">shinyMode</span>){</span>
<span id="cb240-2"><a href="excercise-ploty.html#cb240-2"></a></span>
<span id="cb240-3"><a href="excercise-ploty.html#cb240-3"></a>  Shiny<span class="op">.</span><span class="fu">addCustomMessageHandler</span>(</span>
<span id="cb240-4"><a href="excercise-ploty.html#cb240-4"></a>    type <span class="op">=</span> <span class="st">&#39;add-traces&#39;</span><span class="op">,</span> <span class="kw">function</span>(msg){</span>
<span id="cb240-5"><a href="excercise-ploty.html#cb240-5"></a>      Plotly<span class="op">.</span><span class="fu">addTraces</span>(msg<span class="op">.</span><span class="at">id</span><span class="op">,</span> msg<span class="op">.</span><span class="at">data</span>)<span class="op">;</span></span>
<span id="cb240-6"><a href="excercise-ploty.html#cb240-6"></a>    }</span>
<span id="cb240-7"><a href="excercise-ploty.html#cb240-7"></a>  )</span>
<span id="cb240-8"><a href="excercise-ploty.html#cb240-8"></a></span>
<span id="cb240-9"><a href="excercise-ploty.html#cb240-9"></a>}</span></code></pre></div>
<p>After installing the package, one can use the new proxy function in a shiny application, below we provide a button that adds a trace of random data to the chart.</p>
<div class="sourceCode" id="cb241"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb241-1"><a href="excercise-ploty.html#cb241-1"></a><span class="kw">library</span>(shiny)</span>
<span id="cb241-2"><a href="excercise-ploty.html#cb241-2"></a><span class="kw">library</span>(plotlier)</span>
<span id="cb241-3"><a href="excercise-ploty.html#cb241-3"></a></span>
<span id="cb241-4"><a href="excercise-ploty.html#cb241-4"></a>df &lt;-<span class="st"> </span><span class="kw">data.frame</span>(<span class="dt">x =</span> <span class="dv">1</span><span class="op">:</span><span class="dv">10</span>, <span class="dt">y =</span> <span class="kw">runif</span>(<span class="dv">10</span>))</span>
<span id="cb241-5"><a href="excercise-ploty.html#cb241-5"></a></span>
<span id="cb241-6"><a href="excercise-ploty.html#cb241-6"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb241-7"><a href="excercise-ploty.html#cb241-7"></a>  <span class="kw">actionButton</span>(<span class="st">&quot;add&quot;</span>, <span class="st">&quot;Add random trace&quot;</span>),</span>
<span id="cb241-8"><a href="excercise-ploty.html#cb241-8"></a>  <span class="kw">plotlyOutput</span>(<span class="st">&quot;plot&quot;</span>)</span>
<span id="cb241-9"><a href="excercise-ploty.html#cb241-9"></a>)</span>
<span id="cb241-10"><a href="excercise-ploty.html#cb241-10"></a></span>
<span id="cb241-11"><a href="excercise-ploty.html#cb241-11"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output){</span>
<span id="cb241-12"><a href="excercise-ploty.html#cb241-12"></a></span>
<span id="cb241-13"><a href="excercise-ploty.html#cb241-13"></a>  output<span class="op">$</span>plot &lt;-<span class="st"> </span><span class="kw">renderPlotly</span>({</span>
<span id="cb241-14"><a href="excercise-ploty.html#cb241-14"></a>    df <span class="op">%&gt;%</span><span class="st"> </span></span>
<span id="cb241-15"><a href="excercise-ploty.html#cb241-15"></a><span class="st">      </span><span class="kw">plotly</span>() <span class="op">%&gt;%</span><span class="st"> </span></span>
<span id="cb241-16"><a href="excercise-ploty.html#cb241-16"></a><span class="st">      </span><span class="kw">plot_line</span>(<span class="st">&quot;x&quot;</span>, <span class="st">&quot;y&quot;</span>)</span>
<span id="cb241-17"><a href="excercise-ploty.html#cb241-17"></a>  })</span>
<span id="cb241-18"><a href="excercise-ploty.html#cb241-18"></a></span>
<span id="cb241-19"><a href="excercise-ploty.html#cb241-19"></a>  proxy &lt;-<span class="st"> </span><span class="kw">plotlyProxy</span>(<span class="st">&quot;plot&quot;</span>)</span>
<span id="cb241-20"><a href="excercise-ploty.html#cb241-20"></a></span>
<span id="cb241-21"><a href="excercise-ploty.html#cb241-21"></a>  <span class="kw">observeEvent</span>(input<span class="op">$</span>add, {</span>
<span id="cb241-22"><a href="excercise-ploty.html#cb241-22"></a>    random &lt;-<span class="st"> </span><span class="kw">data.frame</span>(<span class="dt">x =</span> <span class="kw">runif</span>(<span class="dv">10</span>, <span class="dv">1</span>, <span class="dv">10</span>), <span class="dt">y =</span> <span class="kw">runif</span>(<span class="dv">10</span>))</span>
<span id="cb241-23"><a href="excercise-ploty.html#cb241-23"></a>    </span>
<span id="cb241-24"><a href="excercise-ploty.html#cb241-24"></a>    <span class="kw">plot_add_marker</span>(</span>
<span id="cb241-25"><a href="excercise-ploty.html#cb241-25"></a>      proxy,</span>
<span id="cb241-26"><a href="excercise-ploty.html#cb241-26"></a>      random,</span>
<span id="cb241-27"><a href="excercise-ploty.html#cb241-27"></a>      <span class="st">&quot;x&quot;</span>, <span class="st">&quot;y&quot;</span></span>
<span id="cb241-28"><a href="excercise-ploty.html#cb241-28"></a>    )</span>
<span id="cb241-29"><a href="excercise-ploty.html#cb241-29"></a>  })</span>
<span id="cb241-30"><a href="excercise-ploty.html#cb241-30"></a></span>
<span id="cb241-31"><a href="excercise-ploty.html#cb241-31"></a>}</span>
<span id="cb241-32"><a href="excercise-ploty.html#cb241-32"></a></span>
<span id="cb241-33"><a href="excercise-ploty.html#cb241-33"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
<div class="figure">
<img src="images/plotlier-add.png" alt="" />
<p class="caption">Plotly with dynamic traces</p>
</div>
</div>
<div id="size-resize-plotly.js" class="section level2" number="11.5">
<h2><span class="header-section-number">11.5</span> Size &amp; Resize Plotly.js</h2>
<p>At this stage the plotlier package does yet provide responsive visualisation: resizing the screen does not resize the visualisation. In order to ensure that it is we have to define a default width that is not defined in pixel but percentage (such as 100%) and implement the resize method.</p>
<p>As mentioned in a previous chapter, the default size can be changed with the <code>sizingPolicy</code> function, below we set it to <code>100%</code>.</p>
<div class="sourceCode" id="cb242"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb242-1"><a href="excercise-ploty.html#cb242-1"></a><span class="co"># create widget</span></span>
<span id="cb242-2"><a href="excercise-ploty.html#cb242-2"></a>htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb242-3"><a href="excercise-ploty.html#cb242-3"></a>  <span class="dt">name =</span> <span class="st">&#39;plotly&#39;</span>,</span>
<span id="cb242-4"><a href="excercise-ploty.html#cb242-4"></a>  x,</span>
<span id="cb242-5"><a href="excercise-ploty.html#cb242-5"></a>  <span class="dt">width =</span> width,</span>
<span id="cb242-6"><a href="excercise-ploty.html#cb242-6"></a>  <span class="dt">height =</span> height,</span>
<span id="cb242-7"><a href="excercise-ploty.html#cb242-7"></a>  <span class="dt">package =</span> <span class="st">&#39;plotlier&#39;</span>,</span>
<span id="cb242-8"><a href="excercise-ploty.html#cb242-8"></a>  <span class="dt">elementId =</span> elementId,</span>
<span id="cb242-9"><a href="excercise-ploty.html#cb242-9"></a>  <span class="dt">preRenderHook =</span> render_plotlier,</span>
<span id="cb242-10"><a href="excercise-ploty.html#cb242-10"></a>  <span class="dt">sizingPolicy =</span> <span class="kw">sizingPolicy</span>(</span>
<span id="cb242-11"><a href="excercise-ploty.html#cb242-11"></a>    <span class="dt">defaultWidth =</span> <span class="st">&quot;100%&quot;</span></span>
<span id="cb242-12"><a href="excercise-ploty.html#cb242-12"></a>  )</span>
<span id="cb242-13"><a href="excercise-ploty.html#cb242-13"></a>)</span></code></pre></div>
<p>Next we can use the plotly function <code>relayout</code> to resize the visualisation when the size of its container changes.</p>
<div class="sourceCode" id="cb243"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb243-1"><a href="excercise-ploty.html#cb243-1"></a>resize<span class="op">:</span> <span class="kw">function</span>(width<span class="op">,</span> height) {</span>
<span id="cb243-2"><a href="excercise-ploty.html#cb243-2"></a>  Plotly<span class="op">.</span><span class="fu">relayout</span>(el<span class="op">.</span><span class="at">id</span><span class="op">,</span> {<span class="dt">width</span><span class="op">:</span> width<span class="op">,</span> <span class="dt">height</span><span class="op">:</span> height})<span class="op">;</span></span>
<span id="cb243-3"><a href="excercise-ploty.html#cb243-3"></a>}</span></code></pre></div>
<p>One can test this by resizing the browser or RStudio viewer window.</p>
<div class="sourceCode" id="cb244"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb244-1"><a href="excercise-ploty.html#cb244-1"></a><span class="kw">plotly</span>(cars) <span class="op">%&gt;%</span><span class="st">  </span></span>
<span id="cb244-2"><a href="excercise-ploty.html#cb244-2"></a><span class="st">      </span><span class="kw">plot_marker</span>(<span class="st">&quot;dist&quot;</span>, <span class="st">&quot;speed&quot;</span>)</span></code></pre></div>
<div class="figure">
<img src="images/plotlier-responsive.png" alt="" />
<p class="caption">Responsive plotly output</p>
</div>
</div>
<div id="performance-security-with-plotly.js" class="section level2" number="11.6">
<h2><span class="header-section-number">11.6</span> Performance &amp; Security with Plotly.js</h2>
<p>The package stores the data passed to the <code>plotly</code> function in the widget object, however, as explained in a previous chapter this is insecure and a drain on performances. First, this data serialised to JSON but not used in JavaScript and thus leads to unnecessary computations. Second, this data is visible on the resulting visualisation which may cause security concerns given the user may not deliberately use all the data in the visualisation. This can be remedied to by use the <code>preRenderHook</code>.</p>
<div class="sourceCode" id="cb245"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb245-1"><a href="excercise-ploty.html#cb245-1"></a>render_plotlier &lt;-<span class="st"> </span><span class="cf">function</span>(p){</span>
<span id="cb245-2"><a href="excercise-ploty.html#cb245-2"></a>  p<span class="op">$</span>x<span class="op">$</span>data &lt;-<span class="st"> </span><span class="ot">NULL</span></span>
<span id="cb245-3"><a href="excercise-ploty.html#cb245-3"></a>  <span class="kw">return</span>(p)</span>
<span id="cb245-4"><a href="excercise-ploty.html#cb245-4"></a>}</span></code></pre></div>
<p>The function define above can then be used in the <code>htmlwidgets::createWidget</code> function so it is run just before the visualisation renders.</p>
<div class="sourceCode" id="cb246"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb246-1"><a href="excercise-ploty.html#cb246-1"></a>htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb246-2"><a href="excercise-ploty.html#cb246-2"></a>  <span class="dt">name =</span> <span class="st">&#39;plotly&#39;</span>,</span>
<span id="cb246-3"><a href="excercise-ploty.html#cb246-3"></a>  x,</span>
<span id="cb246-4"><a href="excercise-ploty.html#cb246-4"></a>  <span class="dt">width =</span> width,</span>
<span id="cb246-5"><a href="excercise-ploty.html#cb246-5"></a>  <span class="dt">height =</span> height,</span>
<span id="cb246-6"><a href="excercise-ploty.html#cb246-6"></a>  <span class="dt">package =</span> <span class="st">&#39;plotlier&#39;</span>,</span>
<span id="cb246-7"><a href="excercise-ploty.html#cb246-7"></a>  <span class="dt">elementId =</span> elementId,</span>
<span id="cb246-8"><a href="excercise-ploty.html#cb246-8"></a>  <span class="dt">preRenderHook =</span> render_plotlier</span>
<span id="cb246-9"><a href="excercise-ploty.html#cb246-9"></a>)</span></code></pre></div>

</div>
</div>



            </section>

          </div>
        </div>
      </div>
<a href="final-revisions.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="introduction-to-shiny.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/lunr.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/javascript-for-r/edit/master/3-28-htmlwidgets-plotly.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
